<template>
  <div>
    <div>
      <el-button type="primary" size="default" @click="startEcharts"
        >启动</el-button
      >
      <el-button type="primary" size="default" @click="closeEcharts"
        >暂停</el-button
      >
      <div class="echartsBox">
        <!-- 内存使用率折线图 -->
        <Echarts
          :data="OptionData"
          style="width: 800px; height: 300px; margin-top: 30px"
          v-loading="loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          element-loading-text="数据加载中"
        ></Echarts>
        <!-- 内存使用占比饼图 -->
        <Echarts
          :data="OptionData2"
          style="width: 300px; height: 300px; margin-top: 30px"
        ></Echarts>
        <Echarts
          :data="OptionData3"
          style="width: 800px; height: 300px; margin-top: 30px"
        ></Echarts>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "@/components/ECharts/ECharts.vue";
//解决小数丢失精度问题
import Decimal from "decimal.js";
import SocketService from "@/utils/websocket_service";

export default {
  data() {
    return {
      //websocket
      socket: null,
      //定时器
      jishiqi: null,
      //折现图是否运行的标志
      isStart: true,
      //加载中
      loading: true,
      websock: null,
      //x轴数据
      xData: [],
      //y轴数据
      yData: [],
      //内存使用率折线图数据
      OptionData: {
        title: {
          text: "内存使用率",
        },
        xAxis: {
          type: "category",
          data: [],
          //紧挨边缘
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          //缩放:脱离0值比例
          scale: true,
        },
        series: [
          {
            data: [],
            type: "line",
            //使折线变得平滑
            smooth: true,
            areaStyle: {
              color: "#3FB1E3",
            },
          },
        ],
        tooltip: {
          //tip中的内容
          formatter: function(arg) {
            // let argData = arg.data.toFixed(5);

            // argData = argData + "%";
            var num =
              new Decimal(arg.data).mul(new Decimal(100)).toFixed(3) + "%";

            return "CPU已使用:" + num;
          },
        },
      },
      //内存使用占比饼图数据
      OptionData2: {
        title: {
          text: "内存使用占比",
        },
        tooltip: {
          // tip中的内容
          formatter: function(arg) {
            var num =
              new Decimal(arg.data.value).mul(new Decimal(100)).toFixed(3) +
              "%";

            return arg.data.name + ":" + num;
          },
        },
        series: [
          {
            type: "pie",
            data: [
              {
                name: "占用",
                value: "",
              },
              {
                name: "空闲",
                value: "",
              },
              {
                name: "buffCache",
                value: "",
              },
            ],
            label: {
              show: true,
              position: "inside",
              fontSize: 12,
            },
          },
        ],
      },
      //CPU信息饼图数据
      OptionData3: {
        title: {
          text: "CPU信息",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                name: "用户空间",
                value: "",
              },
              {
                name: "内核空间",
                value: "",
              },
              {
                name: "改变过优先级的进程",
                value: "",
              },
              {
                name: "空闲CPU",
                value: "",
              },
              {
                name: "IO等待",
                value: "",
              },
            ],
            label: {
              show: true,
              // position: "inside",
              // fontSize: 12,
              formatter: function(arg) {
                return arg.data.name + ":" + arg.data.value + "%";
              },
            },
            emphasis: {
              label: {
                show: true,
              },
              labelLine: {
                show: false,
              },
            },
          },
        ],
      },
    };
  },
  components: {
    Echarts,
  },
  created() {
    // this.initWebSocket();
    // 连接到后台WebSocket服务器
    this.socket = new SocketService("ws://47.106.71.32:8080/ws/1000");
    this.cpuSocket = new SocketService("ws://47.106.71.32:8080/ws/1001");

    this.socket.registerCallBack("mem", this.getData);
    this.cpuSocket.registerCallBack("cpu", this.getCPUData);
    // console.log(this.$moment().format('HH:mm:ss'));
    this.jishiqi = setInterval(this.getTimeData, 1000);

    setTimeout(() => {
      this.loading = false;
    }, 3000);
  },
  mounted() {
    this.socket.send("mem");
    this.cpuSocket.send("cpu");
  },
  destroyed() {
    //断开连接
    this.socket.send("none");
    this.cpuSocket.send("none");
    clearInterval(this.jishiqi);
  },
  methods: {
    //启动echarts
    startEcharts() {
      if (!this.isStart) {
        this.jishiqi = setInterval(this.getTimeData, 1000);
        // this.initWebSocket();
        this.socket.registerCallBack("mem", this.getData);
        this.cpuSocket.registerCallBack("cpu", this.getCPUData);
        this.isStart = true;
      }
    },
    //暂停echarts
    closeEcharts() {
      if (this.isStart) {
        this.isStart = false;
        clearInterval(this.jishiqi);
        this.socket.unRegisterCallBack("mem");
        this.cpuSocket.unRegisterCallBack("cpu");
      }
    },
    //获取时间数据
    getTimeData() {
      if (this.xData.length >= 10) {
        this.xData.splice(0, 1);
        this.xData.push(this.$moment().format("HH:mm:ss"));
      } else {
        this.xData.push(this.$moment().format("HH:mm:ss"));
      }
      // console.log(this.xData)
    },

    //  initWebSocket(){ //初始化weosocket
    //     const wsuri = "ws://47.106.71.32:8080/ws/111";
    //     this.websock = new WebSocket(wsuri);
    //     this.websock.onmessage = this.websocketonmessage;
    //     this.websock.onerror = this.websocketonerror;
    //     this.websock.onclose = this.websocketclose;
    //   },
    //   websocketonerror(){//连接建立失败重连
    //     this.initWebSocket();
    //   },
    getData(redata) {
      if (this.yData.length >= 10) {
        this.yData.splice(0, 1);
        this.yData.push(redata.used / redata.total);
      } else {
        this.yData.push(redata.used / redata.total);
      }
      // console.log(this.yData)
      // console.log(this.OptionData.xAxis.type);
      this.OptionData.xAxis.data = this.xData;
      this.OptionData.series[0].data = this.yData;
      // console.log(this.yData)
      this.OptionData2.series[0].data[0].value = redata.used / redata.total;
      this.OptionData2.series[0].data[1].value = redata.free / redata.total;
      this.OptionData2.series[0].data[2].value =
        redata.buffCache / redata.total;
    },
    getCPUData(redata) {
      this.OptionData3.series[0].data[0].value = redata.us;
      this.OptionData3.series[0].data[1].value = redata.sy;
      this.OptionData3.series[0].data[2].value = redata.ni;
      this.OptionData3.series[0].data[3].value = redata.id;
      this.OptionData3.series[0].data[4].value = redata.wa;
    },
    // websocketonmessage(e) {
    //   //数据接收
    //   // const redata = JSON.parse(e.data);
    //   // console.log(redata.memoryMessage)
    //   // if (this.yData.length >= 10) {
    //   //   this.yData.splice(0, 1);
    //   //   this.yData.push(redata.memoryMessage.used / redata.memoryMessage.total);
    //   // } else {
    //   //   this.yData.push(redata.memoryMessage.used / redata.memoryMessage.total);
    //   // }
    //   // // console.log(this.yData)
    //   // // console.log(this.OptionData.xAxis.type);
    //   // this.OptionData.xAxis.data = this.xData;
    //   // this.OptionData.series[0].data = this.yData;
    //   // // console.log(this.yData)
    //   // this.OptionData2.series[0].data[0].value =
    //   //   redata.memoryMessage.used / redata.memoryMessage.total;
    //   // this.OptionData2.series[0].data[1].value =
    //   //   redata.memoryMessage.free / redata.memoryMessage.total;
    // },
    // websocketsend(Data) {
    //   //数据发送
    //   this.websock.send(Data);
    // },
    // websocketclose(e) {
    //   //关闭
    // },
    // closeWBS() {
    //   this.websock.close();
    // },
  },
};
</script>

<style>
.echartsBox {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>
